
//表单的提醒元素上移并变小
$("#first-name").focusin(function(){
    $(this).siblings(".hide-placeholder-name-1").css({
        "left":"15px",
        "top":"25px",
        "font-size":"12px"
    });
})

$("#first-name").focusout(function(){
    if($(this)[0].value===''){
        $(".hide-placeholder-name-1").css({
            "left":"15px",
            "top":"50%",
            "font-size":"18px"
        });
    }
    if($(this)[0].value!==''){
        $(this).siblings(".hide-placeholder-name-1").css({
            "left":"15px",
            "top":"25px",
            "font-size":"12px"
        });
    }
  
})

$("#last-name").focusin(function(){
    $(".hide-placeholder-name-2").css({
        "left":"51%",
        "top":"25px",
        "font-size":"12px"
    });
})

$("#last-name").focusout(function(){
    if($(this)[0].value===''){
        $(".hide-placeholder-name-2").css({
            "left":"51%",
            "top":"50%",
            "font-size":"18px"
        });
    }
    if($(this)[0].value!==''){
        $(".hide-placeholder-name-2").css({         
            "left":"51%",
            "top":"25px",
            "font-size":"12px"
        });
    }
   
})

$("#birth-date").focusin(function(){
    $(this).siblings(".hide-placeholder-name-1").css({
        "left":"15px",
        "top":"25px",
        "font-size":"12px"
    });
})

$("#birth-date").focusout(function(){
    if($(this)[0].value===''){
        $(".hide-placeholder-name-1").css({
            "left":"15px",
            "top":"50%",
            "font-size":"18px"
        });
    }
    if($(this)[0].value!==''){
        $(this).siblings(".hide-placeholder-name-1").css({
            "left":"15px",
            "top":"25px",
            "font-size":"12px"
        });
    }
})

$("#email-text").focusin(function(){
    $(this).siblings(".hide-placeholder-name-1").css({
        "left":"15px",
        "top":"25px",
        "font-size":"12px"
    });
})

$("#email-text").focusout(function(){
    if($(this)[0].value===''){
    $(this).siblings(".hide-placeholder-name-1").css({
            "left":"15px",
            "top":"50%",
            "font-size":"18px"
        });
    }
    if($(this)[0].value!==''){
        $(this).siblings(".hide-placeholder-name-1").css({
            "left":"15px",
            "top":"25px",
            "font-size":"12px"
        });
    }
})

$("#psw-1").focusin(function(){
    $(this).siblings(".hide-placeholder-name-1").css({
        "left":"15px",
        "top":"25px",
        "font-size":"12px"
    });
})

$("#psw-1").focusout(function(){
    if($(this)[0].value===''){
        $(this).siblings(".hide-placeholder-name-1").css({
            "left":"15px",
            "top":"50%",
            "font-size":"18px"
        });
    }
    if($(this)[0].value!==''){
        $(this).siblings(".hide-placeholder-name-1").css({
            "left":"15px",
            "top":"25px",
            "font-size":"12px"
        });
    }
})

$("#psw-2").focusin(function(){
    $(this).siblings(".hide-placeholder-name-1").css({
        "left":"15px",
        "top":"25px",
        "font-size":"12px"
    });
})

$("#psw-2").focusout(function(){
    if($(this)[0].value===''){
        $(this).siblings(".hide-placeholder-name-1").css({
            "left":"15px",
            "top":"50%",
            "font-size":"18px"
        });
    }
    if($(this)[0].value!==''){
        $(this).siblings(".hide-placeholder-name-1").css({
            "left":"15px",
            "top":"25px",
            "font-size":"12px"
        });
    }
})

$("#tel").focusin(function(){
    $(this).siblings(".hide-placeholder-name-1").css({
        "left":"15px",
        "top":"25px",
        "font-size":"12px"
    });
})

$("#tel").focusout(function(){
    if($(this)[0].value===''){
        $(this).siblings(".hide-placeholder-name-1").css({
            "left":"15px",
            "top":"50%",
            "font-size":"18px"
        });
    }
    if($(this)[0].value!==''){
        $(this).siblings(".hide-placeholder-name-1").css({
            "left":"15px",
            "top":"25px",
            "font-size":"12px"
        });
    }
})

$("#apple_id").focusin(function(){
    $(this).siblings(".hide-placeholder-name-1").css({
        "left":"15px",
        "top":"25px",
        "font-size":"12px"
    });
})

$("#apple_id").focusout(function(){
    if($(this)[0].value===''){
        $(this).siblings(".hide-placeholder-name-1").css({
            "left":"15px",
            "top":"50%",
            "font-size":"18px"
        });
    }
    if($(this)[0].value!==''){
        $(this).siblings(".hide-placeholder-name-1").css({
            "left":"15px",
            "top":"25px",
            "font-size":"12px"
        });
    }
})

$("#apple_psw").focusin(function(){
    $(this).siblings(".hide-placeholder-name-1").css({
        "left":"15px",
        "top":"25px",
        "font-size":"12px"
    });
})

$("#apple_psw").focusout(function(){
    if($(this)[0].value===''){
        $(this).siblings(".hide-placeholder-name-1").css({
            "left":"15px",
            "top":"50%",
            "font-size":"18px"
        });
    }
    if($(this)[0].value!==''){
        $(this).siblings(".hide-placeholder-name-1").css({
            "left":"15px",
            "top":"25px",
            "font-size":"12px"
        });
    }
})

//正则 验证表单


//判断密码框

let pws_first = document.querySelector('#psw-1');
let pws_sec = document.querySelector('#psw-2');
let email_text = document.querySelector('#email-text');
let warning_tips_psw = document.querySelector('.warning-psw');
let warning_tips_email = document.querySelector('.warning-email');
let warning_tips_name = document.querySelector('.warning-name');
let first_name = document.querySelector('#first-name');
let last_name = document.querySelector('#last-name');
console.log(email_text);
pws_sec.addEventListener('blur',checkTwoPws);
pws_first.addEventListener('blur',checkTwoPws);
function checkTwoPws(){
    if(pws_sec.value&&pws_first.value){
        if(pws_sec.value!=pws_first.value) {
            warning_tips_psw.style.visibility='visible';
            pws_first.style.background = '#fef0f0';
            pws_sec.style.background = '#fef0f0';
        }else {
            warning_tips_psw.style.visibility='hidden';
            pws_first.style.background = '#fff';
            pws_sec.style.background = '#fff';
        }
    }else {
        warning_tips_psw.style.visibility='visible';
        pws_first.style.background = '#fef0f0';
        pws_sec.style.background = '#fef0f0';
    }
  
}

//验证邮箱  ^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$
email_text.addEventListener('blur',checkEmail);
function checkEmail(){
    if(email_text.value) {
        //引入正则
        let emailTest = /[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+/;
        if(!emailTest.test(email_text.value)) {
            warning_tips_email.style.visibility='visible';
            email_text.style.background = '#fef0f0';
            console.log(1);
        }else {
            warning_tips_email.style.visibility='hidden';
            email_text.style.background = '#fff';
            console.log(23);
        }
     } else {
        warning_tips_email.style.visibility='visible';
        email_text.style.background = '#fef0f0';
        console.log(1);
    }
}

//验证姓名非空

first_name.addEventListener('blur',checkName);
last_name.addEventListener('blur',checkName);
function checkName(){
    if(first_name.value&&last_name.value) {
            warning_tips_name.style.visibility='hidden';
            first_name.style.background = '#fff';       
            last_name.style.background = '#fff';       
     } else {
        warning_tips_name.style.visibility='visible';
        first_name.style.background = '#fef0f0';
        last_name.style.background = '#fef0f0';
    }
}


//表单提交前进行判断
let submitBtn = document.querySelector('input[type="button"]');
let form = document.querySelector('#submit_form');
submitBtn.addEventListener('click',function(e){
    // console.log(1);
    checkName();
    checkEmail();
    checkTwoPws();
    if((warning_tips_email.style.visibility==='hidden') && (warning_tips_psw.style.visibility==='hidden')){
        form.submit();
    }
})
